// 在 Vuex 中，状态的持久化是指将 Vuex 的状态数据保存在浏览器的本地存储中
// （如 localStorage 或 sessionStorage），以便在页面刷新或关闭后重新打开时仍然可以恢复这些数据。
// 实现 Vuex 持久化的常见方法有以下几种：


// 使用 Vuex 插件
        // Vuex 提供了插件机制，允许你通过插件来扩展其功能。
        // 可以利用这一点来编写自己的持久化插件
        
        // 页面关闭的时候
        // beforeunload 是一个 JavaScript 事件，在用户试图关闭或离开当前页面时触发
        window.addEventListener('beforeunload', () => {
            localStorage.setItem('vuex_state', JSON.stringify(state))
        })


        // 每次 mutation 后调用
        const persistPlugin = (store) => {
            store.subscribe((mutaion, state) => {
                localStorage.setItem('vuex_state', JSON.stringify(state))
            })
        }
        // 应用初始化时，从 localStorage 恢复状态
        const savedState = localStorage.getItem('vuexState');
        if (savedState) {
            try {
                store.replaceState(JSON.parse(savedState));
            } catch (error) {
                console.log(error)
            }
        }

        const store = new Vuex.Store({
            state: {
                user: null,
                token: ''
            },
            mutations: {
                setUser(state, user) {
                    state.user = user
                },
                setToken(state, token) {
                    state.token = token
                }
            },
            plugins: [persistPlugin]
        })